<script setup lang='ts'>
import { useRoute,useRouter } from 'vue-router';
import BookHead from './head.vue'
const route = useRoute()
const router = useRouter()
const showNormal = ()=>{
    router.push('/stateInfo')
}
const showEmergency = ()=>{
    router.push('/stateInfo/emergency')
}
const showStockOut = ()=>{
    router.push('/stateInfo/stockOut')
}
</script>

<template>
    <div>
        <div class="bg-white px-24 h-12 flex items-center justify-center">
            <li class="mx-8"><a-button type="primary" class="bg-green-500 orr" @click="showNormal">正常</a-button></li>
            <li class="mx-8"><a-button type="primary" class="bg-yellow-400 gaoji" @click="showEmergency">告急</a-button></li>
            <li class="mx-8"><a-button type="primary" danger @click="showStockOut">缺货</a-button></li>
        </div>
        <BookHead/>
        <div>
            <RouterView/>
        </div>
    </div>
</template>

<style scoped>
li{
    display: inline-block;
}
.orr:hover{
    background-color: #4ADE80;
}
.gaoji:hover{
    background-color: #FDE047;
}
</style>